<template>
    <view class="page">
        <view class="page-from">
<!--            <view class="from-text">-->
<!--                <view class="p">-->
<!--                    <text></text>-->
<!--                    <view class="btn" v-if="type=='add'" @click="toSkipTemplate">选择模板</view>-->
<!--                </view>-->
<!--            </view>-->
            <view class="from-text">
                <view class="p">
                    <text>业务情况</text>
                    <view class="btn" v-if="type=='add'" @click="toSkipTemplate">选择模板</view>
                </view>
                <textarea maxlength="-1" placeholder="介绍一下您的业务情况，有助于提高对接成功概率" v-model="business_situation"></textarea>
            </view>
            <view class="from-text">
                <view class="ps">
                    <text>手机号</text>
                    <input class="input" placeholder="请输入手机号" v-model="phoneNumber" />
                </view>
            </view>
            <view class="from-text">
                <view class="ps">
                    <text>微信号</text>
                    <input class="input" placeholder="请输入微信号" v-model="wechatNumber" />
                </view>
            </view>
            <view class="from-text">
                <view class="ps">
                    <text>邮箱</text>
                    <input class="input" placeholder="请输入邮箱" v-model="E_mail" />
                </view>
            </view>
            <view class="from-img">
                <view class="page-img-head">成功案例/相关资质</view>
                <view class="page-img-list">
                    <view class="img-content" v-for="(item,index) in imgList" :key="index" v-if="imgList.length>0">
                        <img :src="item" mode="aspectFill" @click="previewImage(index)" />
                        <img class="del-btn" :src="File_Url+'del-Image.png'" @click="delImage(index)" />
                    </view>
                    <img class="img-addbtn" :src="File_Url+'img-upload.png'" @click="chooseImage" v-if="imgList.length<9"/>
                </view>
            </view>
        </view>
        <view class="page-btn" v-if="type=='set'">
            <button @click="setBusinessSituationTemplates">保存</button>
        </view>
        <view class="page-btn" v-if="type=='add'">
            <text class="temolateBtn" @click="setBusinessSituationTemplate">保存为模板</text>
            <button @click="buttNeeds">提交对接申请</button>
        </view>
    </view>
</template>

<script>
    import Indexput from "../../../components/inputbar/indexput";
    export default {
        name: "needsApply",
        components: {Indexput},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                needId:'',
                imgList: [],
                imgId: [],
                phoneNumber: '',
                wechatNumber: '',
                E_mail: '',
                business_situation: '',
                templateId: '',
                type: 'add'
            }
        },
        onLoad(query){
            if (query.id){
                this.needId = query.id;
                this.type = "add";
                uni.setNavigationBarTitle({
                    title: '对接申请'
                })
                this.getUserInfos();
            }
            if (query.template_id){
                this.templateId = query.template_id;
                this.type = "set";
                this.getBusinessSituationTemplate();
                uni.setNavigationBarTitle({
                    title: '编辑'
                })
            }

        },
        onShow(){
            if (getApp().globalData.template_id&&getApp().globalData.template_id!=''){
                this.templateId = getApp().globalData.template_id;
                this.getBusinessSituationTemplate();
            }
        },
        onUnload(){
            if (this.type == 'add'){
                getApp().globalData.template_id = '';
            }
        },
        methods:{
            //获取个人信息
            async getUserInfos(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.phoneNumber = res.data.data.phone
                }
            },
            //获取模板内容
            async getBusinessSituationTemplate(){
                const res = await this.$api.getBusinessSituationTemplate({user_token: uni.getStorageSync('userToken'),id: this.templateId});
                if (res.data.level == 'success'){
                    let data = res.data.data
                    this.business_situation = data.content;
                    this.wechatNumber = data.wechat;
                    this.E_mail = data.email;
                    this.phoneNumber = data.phone;
                    this.imgList = [];
                    this.imgId = [];
                    data.img_info.forEach(item=>{
                        this.imgList.push(item.img_url);
                        this.imgId.push(item.img_id)
                    })
                }
            },
            //编辑模板
            async setBusinessSituationTemplates(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    content: this.business_situation,
                    img_ids: this.imgId,
                    id: this.templateId,
                    phoneNumber: this.phoneNumber,
                    wechat_Number: this.wechatNumber,
                    E_mail: this.E_mail
                }
                const res = await this.$api.setBusinessSituationTemplate(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title: res.data.message,
                        duration: 1500
                    });
                    setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    },1500)
                }else {
                    uni.showToast({
                        icon:'none',
                        title: res.data.message,
                    });
                }
            },
            //提交对接申请
            async buttNeeds(){
              let params = {
                  demand_id: this.needId,
                  user_token: uni.getStorageSync('userToken'),
                  business_situation: this.business_situation,
                  case_img_ids: this.imgId,
                  phoneNumber: this.phoneNumber,
                  wechat_Number: this.wechatNumber,
                  E_mail: this.E_mail
              }
              const res = await this.$api.joinDemand(params);
              if (res.data.level == 'success'){
                  uni.showToast({
                      icon:'success',
                      title: res.data.message,
                      duration: 3000
                  })
                  // setTimeout(function () {
                  //     uni.navigateBack({
                  //         delta: 1
                  //     })
                  // },3000)
                  this.getTemplate()
              }else {
                  if (uni.getStorageSync('is_unit_auth')==1){
                      uni.showToast({
                          icon:'none',
                          title: res.data.message,
                          duration: 3000
                      })
                  }else {
                      uni.showModal({
                          title: '提示',
                          content: res.data.message,
                          success: function (res) {
                              if (res.confirm){
                                  uni.navigateTo({
                                      url: '/pages/Authentication/personAuth/personAuth'
                                  })
                              } else if (res.cancel) {

                              }
                          }
                      })
                  }
              }
            },
            //获取订阅消息模板id
            async getTemplate(){
                const res = await this.$api.getTemplate({type: 'demand_result'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log(res);
                        },
                        complete(res){
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1
                                })
                            },1500)
                        }
                    })
                }
            },
            //添加业务模板
            async setBusinessSituationTemplate(){
                let _this = this;
                uni.showModal({
                    title: '保存业务模板',
                    content: '是否将当前业务信息设置为模板？',
                    success: async (res) => {
                        if (res.confirm){
                            let params = {
                                user_token: uni.getStorageSync('userToken'),
                                content: _this.business_situation,
                                img_ids: _this.imgId,
                                phoneNumber: _this.phoneNumber,
                                wechat_Number: _this.wechatNumber,
                                E_mail: _this.E_mail
                            }
                            const res1 = await this.$api.setBusinessSituationTemplate(params);
                            if (res1.data.level == 'success'){
                                uni.showToast({
                                    icon:'success',
                                    title: res1.data.message,
                                    duration: 1500
                                })
                            }else {
                                uni.showToast({
                                    icon:'none',
                                    title: res1.data.message,
                                    duration: 1500
                                })
                            }
                        } else if(res.cancel){

                        }
                    }
                })

            },
            //选择图片
            chooseImage(){
                let count = 9 - this.imgList.length;
                var _this = this;
                uni.chooseImage({
                    sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
                    sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
                    count: count,
                    success: res => {
                        _this.imgList= _this.imgList.concat(res.tempFilePaths);
                        for (let i=0; i< res.tempFilePaths.length; i++){
                            _this.upLoadImage(res.tempFilePaths[i]);
                        }
                    }
                })
            },
            //删除图片
            delImage(id){
                this.imgList.splice(id,1);
                this.imgId.splice(id,1);
            },
            //预览图片
            previewImage(index){
                uni.previewImage({
                    current:index,
                    urls: this.imgList
                })
            },
            //上传图片
            async upLoadImage(url){
                var _this = this;
                uni.showLoading({
                    title: '上传中'
                })
                uni.uploadFile({
                    url: _this.$api.BASE_URL+'file/upload-img',
                    filePath: url,
                    name: 'photo',
                    header: {
                        'content-type': 'application/json' // 默认值
                    },
                    success: function (res) {
                        res.data = JSON.parse(res.data);
                        if (res.data.level == 'success') {
                            _this.imgId.push(res.data.data.id)
                        }else {
                            uni.showToast({
                                icon:'none',
                                title:res.data.message
                            })
                        }
                        uni.hideLoading();
                    }
                })
            },
            //跳转模板列表
            toSkipTemplate(){
                uni.navigateTo({
                    url: '/pages/details/needsDetail/businessTemplate/businessTemplate'
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        @include flex(flex-start, flex-start);
        flex-direction: column;
        min-height: 100vh;
    }
    .page-from{
        @include flex(flex-start, flex-start);
        padding: 30rpx 0;
        width: 100vw;
        flex-direction: column;
        .from-text{
            width: calc(100% - 60rpx);
            padding: 0 30rpx;
            border-bottom: 1rpx solid #eee;
            textarea{
                height: 100px;
            }
            .ps{
                line-height: 100rpx;
                height: 100rpx;
                @include flex(flex-start);
                flex-direction: row;
                .input{
                    margin-left: auto;
                    text-align: right;
                    font-size: 32rpx;
                }
            }
            .p{
                line-height: 70rpx;
                height: 70rpx;
                @include flex(flex-start);
                flex-direction: row;
                .btn{
                    margin-left: auto;
                    font-size: 24rpx;
                    color: #3782FF;
                }
                .input{
                    margin-left: auto;
                    text-align: right;
                    font-size: 32rpx;
                }
            }
        }
        .from-img{
            width: calc(100% - 60rpx);
            padding: 20rpx 30rpx;
            .page-img-head{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 38rpx;
            }
            .page-img-list{
                @include flexWrap(flex-start,flex-start);
                flex-direction: row;
                padding: 20rpx 0;
                .img-content{
                    width: calc((100vw - 120rpx)/3);
                    height: calc((100vw - 120rpx)/3);
                    margin: 10rpx;
                    position: relative;
                    .del-btn{
                        width: 30rpx;
                        height: 30rpx;
                        position: absolute;
                        right: -15rpx;
                        top: -15rpx;
                        background: #FFFFFF;
                        border-radius: 360rpx;
                    }
                }
                .img-addbtn{
                    width: calc((100vw - 120rpx)/3);
                    height: calc((100vw - 120rpx)/3);
                    margin: 10rpx;
                }
            }
        }
    }
    .page-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            color: #FFFFFF;
            font-size: 34rpx;
            background: #3782FF;
            border-radius: 44rpx;
        }
        .grey{
            background: #999999;
        }
        .temolateBtn{
            width: 100%;
            padding: 40rpx 0;
            color: #3782FF;
            text-align: center;
            display: block;
            font-size: 28rpx;
            line-height: 40rpx;
            height: 40rpx;
        }
    }
</style>